<template>
  <div class="about-container">
    <!-- 页面头部 -->
    <div class="about-header">
      <h1>关于我们</h1>
      <div class="header-divider"></div>
    </div>

    <!-- 关于项目 -->
    <section class="about-project">
      <div class="project-image">
        <img
          src="https://picsum.photos/id/1048/600/400"
          alt="城市信息平台团队"
          class="team-img"
        >
      </div>
      <div class="project-description">
        <h2>城市信息平台</h2>
        <p>
          城市信息平台是一个致力于提供全球主要城市详细信息的在线资源中心。我们的使命是
          通过整合和呈现丰富的城市数据，帮助人们更好地了解世界各地的城市，包括它们的
          历史文化、地理特征、经济状况和生活方式。
        </p>
        <p>
          无论您是计划旅行、研究城市发展，还是仅仅对不同文化感兴趣，我们都希望为您提供
          准确、全面且易于理解的城市信息。
        </p>
        <div class="project-features">
          <div class="feature-item">
            <i class="fas fa-check-circle"></i>
            <span>准确的城市数据</span>
          </div>
          <div class="feature-item">
            <i class="fas fa-check-circle"></i>
            <span>丰富的城市图片</span>
          </div>
          <div class="feature-item">
            <i class="fas fa-check-circle"></i>
            <span>详实的文化背景</span>
          </div>
          <div class="feature-item">
            <i class="fas fa-check-circle"></i>
            <span>著名景点介绍</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 我们的团队 -->
    <section class="our-team">
      <h2>我们的团队</h2>
      <p class="team-intro">
        我们是一群热爱城市文化、旅游和技术的专业人士，致力于打造最全面的城市信息平台
      </p>
      <div class="team-members">
        <div class="team-member">
          <div class="member-photo">
            <img
              src="https://picsum.photos/id/1012/300/300"
              alt="团队成员照片"
            >
          </div>
          <div class="member-info">
            <h3>张明</h3>
            <p class="member-role">项目负责人</p>
            <p class="member-bio">
              拥有10年以上旅游行业经验，曾游历30多个国家，对城市文化有深入研究
            </p>
          </div>
        </div>
        <div class="team-member">
          <div class="member-photo">
            <img
              src="https://picsum.photos/id/1027/300/300"
              alt="团队成员照片"
            >
          </div>
          <div class="member-info">
            <h3>李华</h3>
            <p class="member-role">内容编辑</p>
            <p class="member-bio">
              地理学硕士，专注于城市研究和文化传播，擅长将复杂信息转化为生动内容
            </p>
          </div>
        </div>
        <div class="team-member">
          <div class="member-photo">
            <img
              src="https://picsum.photos/id/1025/300/300"
              alt="团队成员照片"
            >
          </div>
          <div class="member-info">
            <h3>王芳</h3>
            <p class="member-role">设计师</p>
            <p class="member-bio">
              资深UI/UX设计师，专注于创建直观、美观的用户界面，提升用户体验
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-us">
      <h2>联系我们</h2>
      <p class="contact-intro">
        如果您有任何建议、问题或想为我们的平台贡献内容，请随时与我们联系
      </p>
      <div class="contact-form-container">
        <form class="contact-form">
          <div class="form-group">
            <label for="name">您的姓名</label>
            <input
              type="text"
              id="name"
              name="name"
              required
              placeholder="请输入您的姓名"
            >
          </div>
          <div class="form-group">
            <label for="email">电子邮箱</label>
            <input
              type="email"
              id="email"
              name="email"
              required
              placeholder="请输入您的邮箱"
            >
          </div>
          <div class="form-group">
            <label for="message">留言内容</label>
            <textarea
              id="message"
              name="message"
              rows="5"
              required
              placeholder="请输入您的留言"
            ></textarea>
          </div>
          <button type="submit" class="submit-btn">发送留言</button>
        </form>
        <div class="contact-info">
          <div class="info-item">
            <i class="fas fa-envelope"></i>
            <div>
              <h3>电子邮箱</h3>
              <p>info@cityinfo.com</p>
            </div>
          </div>
          <div class="info-item">
            <i class="fas fa-map-marker-alt"></i>
            <div>
              <h3>办公地址</h3>
              <p>北京市朝阳区建国路88号</p>
            </div>
          </div>
          <div class="info-item">
            <i class="fas fa-phone"></i>
            <div>
              <h3>联系电话</h3>
              <p>+86 10 8888 7777</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 订阅区域 -->
    <section class="subscribe-section">
      <h2>订阅城市资讯</h2>
      <p>获取最新的城市信息、旅游攻略和文化动态</p>
      <form class="subscribe-form">
        <input
          type="email"
          placeholder="请输入您的邮箱地址"
          required
        >
        <button type="submit">订阅</button>
      </form>
    </section>
  </div>
</template>

<script setup>
// 可以在这里添加表单提交等交互逻辑
const handleSubmit = (e) => {
  e.preventDefault();
  // 处理表单提交逻辑
  alert('感谢您的留言，我们会尽快回复您！');
  e.target.reset();
};

// 在实际项目中，你需要将此函数绑定到表单的submit事件
// 例如：<form class="contact-form" @submit="handleSubmit">
</script>

<style scoped>
.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

/* 页面头部 */
.about-header {
  text-align: center;
  margin-bottom: 3rem;
}

.about-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.header-divider {
  width: 80px;
  height: 3px;
  background-color: #3498db;
  margin: 0 auto;
}

/* 关于项目 */
.about-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 5rem;
  align-items: center;
}

.project-image {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.project-image:hover .team-img {
  transform: scale(1.03);
}

.project-description h2 {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.project-description p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #555;
}

.project-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #34495e;
  font-size: 0.95rem;
}

.feature-item i {
  color: #2ecc71;
}

/* 我们的团队 */
.our-team {
  text-align: center;
  margin-bottom: 5rem;
  padding: 2rem 0;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.our-team h2 {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.team-intro {
  max-width: 700px;
  margin: 0 auto 3rem;
  color: #555;
  line-height: 1.7;
}

.team-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 0 2rem;
}

.team-member {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.member-photo {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.team-member:hover .member-photo img {
  transform: scale(1.05);
}

.member-info {
  padding: 1.5rem;
}

.member-info h3 {
  color: #2c3e50;
  margin-bottom: 0.3rem;
  font-size: 1.3rem;
}

.member-role {
  color: #3498db;
  font-weight: 500;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.member-bio {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* 联系我们 */
.contact-us {
  margin-bottom: 5rem;
}

.contact-us h2 {
  color: #2c3e50;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 1rem;
}

.contact-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
  color: #555;
  line-height: 1.7;
}

.contact-form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.contact-form {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #2c3e50;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
}

.submit-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.info-item i {
  font-size: 1.8rem;
  color: #3498db;
  margin-top: 3px;
  min-width: 30px;
}

.info-item h3 {
  color: #2c3e50;
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
}

.info-item p {
  color: #555;
  margin: 0;
  line-height: 1.6;
}

/* 订阅区域 */
.subscribe-section {
  background-color: #2c3e50;
  color: white;
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 8px;
}

.subscribe-section h2 {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.subscribe-section p {
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

.subscribe-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
}

.subscribe-form input {
  flex: 1;
  padding: 12px 15px;
  border: none;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
  outline: none;
}

.subscribe-form button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.subscribe-form button:hover {
  background-color: #2980b9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-project {
    grid-template-columns: 1fr;
  }

  .contact-form-container {
    grid-template-columns: 1fr;
  }

  .team-members {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .about-container {
    padding: 1rem;
  }

  .project-features {
    flex-direction: column;
  }

  .subscribe-form {
    flex-direction: column;
  }

  .subscribe-form input {
    border-radius: 4px 4px 0 0;
    margin-bottom: 0.5rem;
  }

  .subscribe-form button {
    border-radius: 0 0 4px 4px;
  }
}
</style>
